<template>
  <div class="registration">
    <div class="query-container">
      <el-form inline
               label-width="90px"
               style="overflow: hidden;">
        <div style="width:78%;float: left">
          <el-form-item label="发货时间" :required="true">
            <el-date-picker
              v-model="fromTime"
              style="width: 226px"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              clearable
              @change="fromTimeGive">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="承运方">
            <el-select v-model="params.supplierCompanyId"
                       placeholder="请选择"
                       style="width: 226px"
                       clearable
                       @change="carrierChange">
              <el-option v-for="(item,index) in carrierOptions"
                         :key="index"
                         :label="item.name"
                         :value="item.supplierCompanyId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="OEM供应商">
            <el-select v-model="params.oemGysCode"
                       placeholder="请选择"
                       style="width: 226px"
                       clearable>
              <el-option v-for="(item,index) in pickShortOptions"
                         :key="index"
                         :label="item.name"
                         :value="item.oemGysCode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发货省市区">
            <area-select align="center"
                         :area-values="[fromProvinceCode,fromCityCode,fromDistrictCode]"
                         style="width: 226px"
                         check-strictly
                         @input="selectFromArea" />
          </el-form-item>
          <el-form-item label="发货方地址">
            <el-input v-model="params.fromAddress"
                      style="width: 226px"
                      placeholder="请输入发货方地址"></el-input>
          </el-form-item>
          <el-form-item label="运输模式">
            <el-select v-model="params.transportMode"
                       placeholder="请选择"
                       style="width: 226px"
                       clearable>
              <el-option v-for="(item,index) in ModeOptions"
                         :key="index"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div style="width:202px;float: right">
          <el-form-item style="float: right">
            <el-button type="primary"
                       icon="el-icon-search"
                       @click="search(1)">查询</el-button>
            <el-button type="primary"
                       icon="el-icon-delete"
                       @click="resetForm">清除</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="bottom-container">
      <el-form>
        <el-form-item style="float: right">
          <el-button type="default"
                     icon="el-icon-s-promotion"
                     @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading"
                max-height="500"
                height="500"
                stripe
                border
                :data="tableData"
                element-loading-text="加载中"
                element-loading-spinner="el-icon-loading"
                @sort-change="sortChange">
        <el-table-column v-for="(column, index) in columns"
                         :key="index"
                         :prop="column.prop"
                         :label="column.name"
                         :width="column.width"
                         :sortable="column.sortable?'custom':false"
                         :fixed="fixedProp(column.name)">
          <template slot-scope="scope">
            <div v-if="column.name == '异常情况' && scope.row[column.prop]">
              <span v-for="(item, index) in scope.row[column.prop]"
                    :key="index"
                    class="exception">
                <p>{{item.goodName?item.goodName+'：':''}}</p>
                <p>{{item.lackQuantity?item.lackQuantity:''}}</p>
                <p>{{item.loseQuantity?item.loseQuantity:''}}</p>
                <p>{{item.damageQuantity?item.damageQuantity:''}}</p>
                <p>{{item.otherQuantity?item.otherQuantity:''}}</p>
                <p>{{item.exceptionDesc?'('+ item.exceptionDesc +')':''}}</p>
              </span>
            </div>
            <span v-else>{{transition(scope.row[column.prop],column.props)}}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-show="tableData.length > 0"
                     background
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"
                     :page-sizes="pageSizeOptions"
                     :page-size.sync="pageSize"
                     :current-page.sync="pageNo"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script src="./rmsJs/Registration.js"></script>

<style scoped>
.table-container >>> .el-table__body-wrapper {
  height: 90%;
  overflow-y: auto;
}
.bottom-container >>> .el-pagination {
  margin-top: 20px;
  /* text-align: right; */
}
.bottom-container >>> .el-table tr {
  background-color: var(--prev-bg-white);
  height: 50px;
  font-size: 14px;
}

.registration >>> .el-table__fixed {
  height: auto !important;
  bottom: 17px !important;
}

.registration >>> .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: 1px solid var(--prev-border-color-lighter);
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 20px;
  color: #333333;
  opacity: 1;
}
</style>
<style lang="scss" scoped>
.registration {
  width: 100%;
  height: 100%;
  .query-container {
    padding: 20px 20px 20px 0;
    background: var(--prev-bg-white);
  }
  .bottom-container {
    padding: 20px;
    margin-top: 12px;
    background: var(--prev-bg-white);
    height: calc(100vh - 270px);
    .table-container {
      height: calc(100% - 100px);
      .target-power {
        display: flex;
        .power {
          display: flex;
          align-items: center;
        }
      }
    }
    .exception {
      p {
        margin: 0;
        display: inline-block;
      }
    }
  }
}
</style>
